<template>
  <el-card class="box-card">
    <specdata
      ref="specdata"
      @change-data="changeData"
      @change-table="changeTable"
      :th-list="thList"
    />
    <spectable
      ref="spectable"
      :or-use="orUse"
      :th-list="thList"
    />
  </el-card>
</template>

<script type='text/ecmascript-6'>
import specdata from './spec-data'
import spectable from './spec-table'

export default {
  components: {
    specdata,
    spectable,
  },
  props: {
    // th 值
    thList: {
      type: Array,
      default() {
        return []
      },
    },
    // 是否启用，当前行数据操作
    orUse: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      specData: [],
      specTable: [],
    }
  },
  methods: {
    init(specData, specTable) {
      this.$nextTick(() => {
        this.$refs.specdata.initData(specData, specTable)
      })
    },
    // 规格
    changeData(data) {
      this.$refs.spectable.specData = data
      this.specData = data
      this.onChange()
    },
    changeTable(data) {
      this.$refs.spectable.specTable = data
      this.specTable = data
      this.onChange()
    },
    onChange() {
      const o = { specData: this.specData, specTable: this.specTable }
      this.$emit("change", o)
    }
  },
}
</script>